@extends('layouts.app')
@section('style')
    <style type="text/css">
        .active {
            border: 1px solid #67b168;
            background: #67b168;
            color: #fff;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://www.davidphp.com/css/prism.css">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <h1>product</h1>
                <h2 id="price">价格：0</h2>
                <h2 id="attr">已选择属性：</h2>
                @foreach($attrs as $attr)
                    <div style="padding: 20px;margin: 5px;border: 1px dotted #ccc;">
                        <div style="font-size: 20px;color: black">{{ $attr['attr_name'] }}</div>
                        <div style="padding: 20px">
                            @foreach($attr['attr_value'] as $item)
                                <span class="at" style="border: 1px solid #ddd; margin: 10px; padding: 5px;cursor: pointer">{{ $item }}</span>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-lg-6 col-md-6">
                <pre class="language-javascript">
                    <code class="language-javascript">
var skus = ..... // 后端加载的所有属性组合数组，太长省略 控制台输入 skus 查看
var sku_value = new Array();
$('.at').on('click', function () {
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
    // 获取当前点击属性值的父级的父级的索引，也就是虚线框的索引
    var index = $(this).parent().parent().index();

    sku_value[index] = $(this).html();
    var sku_str = sku_value.join('');
    for (var i = 0; i < skus.length; i++) {
        if (sku_str === skus[i].sku) {
            $('#price').html(skus[i].price);
        }
    }
});
                    </code>
                </pre>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript"  src="https://www.davidphp.com/js/prism.js"></script>
    <script>
        var skus = [{"id":1,"sku":"ADG","price":98},{"id":2,"sku":"ADH","price":45},{"id":3,"sku":"AEG","price":10},{"id":4,"sku":"AEH","price":34},{"id":5,"sku":"AFG","price":42},{"id":6,"sku":"AFH","price":21},{"id":7,"sku":"BDG","price":27},{"id":8,"sku":"BDH","price":18},{"id":9,"sku":"BEG","price":58},{"id":10,"sku":"BEH","price":48},{"id":11,"sku":"BFG","price":85},{"id":12,"sku":"BFH","price":57},{"id":13,"sku":"CDG","price":23},{"id":14,"sku":"CDH","price":82},{"id":15,"sku":"CEG","price":59},{"id":16,"sku":"CEH","price":18},{"id":17,"sku":"CFG","price":17},{"id":18,"sku":"CFH","price":34}];
        var sku_value = new Array();
        $('.at').on('click', function () {
            $(this).parent().children().removeClass('active');
            $(this).addClass('active');
            var index = $(this).parent().parent().index();
            sku_value[index] = $(this).html();
            var sku_str = sku_value.join('');
            $('#attr').html('已选择属性：' + sku_str);
            for (var i = 0; i < skus.length; i++) {
                if (sku_str === skus[i].sku) {
                    $('#price').html('价格：' + skus[i].price);
                }
            }
        });
    </script>
@endsection